<template>
  <div>
    <div class="index">
      <el-form :model="form" class="form">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="副标题">
          <el-input v-model="form.text"></el-input>
        </el-form-item>
        <el-form-item label="封面链接">
          <!-- <el-input v-model="form.img"></el-input> -->
          <el-upload
            class="avatar-uploader"
            action="#"
            :http-request="httpRequest"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="正文">
          <el-input v-model="form.detail" type="textarea" placeholder="请输入内容" :autosize="{ minRows: 8 }"></el-input>
        </el-form-item>
        <el-form-item v-loading="loading">
          <el-button type="primary" @click="onSubmit(form)">提交</el-button>
          <el-button @click="cancle()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  name: '',
  data () {
    return {
      form: {
        title: '',
        text: '',
        img: '',
        detail: '',
        time: '',
        user: this.$session.get("userName")
      },
      disabled: !this.$store.state.isLogin,
      dialogImageUrl: '',
      dialogVisible: false,
      uploadDisabled: false,
      imageUrl: "",
      imgBroadcastList: [],
      loading: false
    }
  },
  mounted () {
    if (!this.$session.has("userName")){
      this.$message({
        message: "请先登录哈~",
        type: "error",
        duration: 0,
        showClose: true,
        offset: 90
      })
    }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    httpRequest (data) {
      let rd = new FileReader() // 创建文件读取对象
      let file = data.file
      rd.readAsDataURL(file) // 文件读取装换为base64类型
      rd.onload = (e) => {
        this.imageUrl = e.target.result
        this.form.img = e.target.result
      }
    },
    addArticle (form) {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds()
      let time = `${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`
      this.form.time = time
      this.axios.post('api/addArticle', {
        title: form.title,
        text: form.text,
        img: form.img,
        detail: form.detail,
        time: form.time,
        user: form.user
      })
    },
    async onSubmit () {
      let n = await this.addArticle(this.form)
      console.log(n)
      this.loading = true
      setTimeout(() => {
        this.$router.push({path:'/article'}),
        this.$router.go(0)
      }, 3000)
    },
    cancle () {
      this.$confirm('你想清楚了吗？确定要取消提交？','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '我再想想',
        type: 'warning'
      }).then(() => {
        this.$router.go(-1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '继续编辑吧~'
        })
      })
    }
  }
}
</script>

<style lang='stylus' scoped>
  .index
    background-color #fff
    min-height 580px
    padding 2rem 2rem .1rem 2rem
    .form
      color #b8b8c2
      .el-upload
      .avatar-uploader
        margin 3rem auto 0 auto
        height 12.5rem
        width 15rem
        border 1px dashed #d9d9d9
        border-radius 0.38rem
        cursor pointer
        position relative
        overflow hidden
      .avatar-uploader
      .el-upload:hover 
        border-color #409EFF
      .avatar-uploader-icon 
        font-size 1.75rem
        color #8c939d
        width 15rem
        height 12.5rem
        line-height 12.5rem
        text-align center 
      .avatar 
        width 15rem
        height 12.5rem
        display block
</style>
